<template>
  <div style="height: calc(100% - 30px)">
    <quill-editor
      class="ql-editor"
      ref="myQuillEditor"
      :content="content"
      :options="editorOption"
      @change="editorChange($event)"
      style="padding: 0"
    />

    <van-button
      type="info"
      v-if="simple && buttonVis"
      block
      @click="$emit('addForum', null)"
    >
      添加
    </van-button>
    <el-button
      v-else-if="buttonVis"
      size="small"
      icon="el-icon-plus"
      style="margin-left: 15px"
      type="primary"
      @click="$emit('addForum', null)"
    >
      添加
    </el-button>
    <el-upload
      id="imageUpload"
      class="avatar-uploader"
      :action="fileUploadUrl"
      name="img"
      :headers="myHeaders"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    ></el-upload>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import {
  baseURL,
  fileRoot,
  fileUploadRoot,
  tokenName,
  empIdName,
} from '@/config'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
  [{ direction: 'rtl' }], // text direction
  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image'],
  ['clean'],
]

// 工具栏配置
const simpleOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['image'],
]

export default {
  props: ['content', 'simple', 'buttonVis'],
  components: {
    quillEditor,
  },
  data: function () {
    return {
      quillUpdateImg: false,
      editorOption: {
        placeholder: '',
        theme: 'snow', // or 'bubble'
        modules: {
          imageResize: {
            //调整大小组件。
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white',
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar'],
          },
          toolbar: {
            container: this.simple ? simpleOptions : toolbarOptions,
            handlers: {
              image: function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  var d = document
                    .getElementById('imageUpload')
                    .children[0].children[0].click()
                } else {
                  this.quill.format('image', false)
                }
              },
            },
          },
        },
      },
      myHeaders: {},
      fileURL: baseURL + fileRoot,
      fileUploadUrl: baseURL + fileUploadRoot,
    }
  },
  watch: {},
  methods: {
    // 富文本图片上传前
    beforeUpload() {
      // 显示loading动画
      this.quillUpdateImg = true
    },
    editorChange(val) {
      this.$emit('input', val)
    },
    uploadSuccess(res) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (res.code == 200) {
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, 'image', this.fileURL + res.data.FL_SrcPath)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        this.$message.error('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
    },
    // 富文本图片上传失败
    uploadError() {
      // loading动画消失
      this.quillUpdateImg = false
      this.$message.error('图片插入失败')
    },
  },
  created: function () {
    this.myHeaders[tokenName] = this.$store.getters['user/accessToken']
    this.myHeaders[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
  },
}
</script>
<style lang="scss">
.editor {
  line-height: normal !important;
  height: 500px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode='video']::before {
  content: '请输入视频地址:';
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
  content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
  content: '等宽字体';
}
.ql-editor.ql-blank {
  height: 100%;
  width: 100%;
}
.ql-editor {
  height: 100%;
  width: 100%;
}
.ql-editor.ql-container {
  height: calc(100% - 70px);
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f6f8f9;
  z-index: 1000;
}
</style>
<style>
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: calc(100% - 70px);
}
</style>
